<template>
  <div>
    <el-table
      :data="tableData"
      align="center"
      style="width: 100%;margin-left:-1px"
      :header-cell-style="tableHeaderStyle"
    >
    <el-table-column label="编号" type="index" width="120" align="center" show-overflow-tooltip />
      <el-table-column prop="tradeName" label="分类名称" width="150" align="center" />
      <el-table-column prop="tradeLevel" label="级别" show-overflow-tooltip align="center">
        <template slot-scope="scope">{{ scope.row.tradeLevel | level }}</template>
      </el-table-column>
      <el-table-column prop="userCount" label="用户数量" show-overflow-tooltip align="center" />
      <el-table-column prop="searchState" label="搜索栏" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.searchState"
            style="width:52px;height:32px"
            active-color="#488DFF"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
            @change="editData(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="viewState" label="是否显示" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.viewState"
            style="width:52px;height:32px"
            active-color="#488DFF"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
            @change="editData(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="setting" label="设置" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.tradeLevel < maxLevel" class="setting-btn">
            <span class="link" @click="addChild(scope.row)">新增下级</span>
            <span class="link" @click="showChild(scope.row)">查看下级</span>
          </div>
          <div v-else>
            <span class="link" @click="showSelf(scope.row)">查看本级</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <div class="setting-btn">
            <span class="link" @click="gotoEditPage(scope.row)">编辑</span>
            <span class="link" style="color: red" @click="delIndustry(scope.row.tradeCode)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { updateIndustry, getUserCount, updateTradeInfo, delIndustry } from '@/api/usermanage'
import { all, allSettled } from 'q'
const levelFilter = ['一级行业', '二级行业', '三级行业']
export default {
  name: 'class-asdtable',
  reject: ['reload'],
  filters: {
    level: val => {
      return levelFilter[val - 1] || '--'
    }
  },
  props: {
    tableData: {
      required: true,
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      tableHeaderStyle: {
        'background-color': '#fafafa',
        color: '#333',
        'font-size': '14px',
        background: 'rgba(242, 242, 242, 1)'
      },
      maxLevel: 2, // 最大等级，用于显示是否可添加下级
      listData: []
    }
  },
  watch: {
    tableData: function() {
      this.tableData.map(async item => {
        this.listData.push({
          ...item,
          userCount: await this.getUserCount(item.tradeCode)
        })
      })
    }
  },
  methods: {
    // 编辑数据
    editData(row) {
      const { tradeName, parentId, searchState, viewState, remarks, tradeCode } = row
      updateTradeInfo({ tradeName, parentId, searchState, viewState, remarks, tradeCode }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
        }
      })
    },
    // 编辑页面
    gotoEditPage(row) {
      this.$router.push({
        name: 'addClassify',
        query: {
          tradeCode: row.tradeCode
        },
        params: { row }
      })
    },
    // 新增下级页面
    addChild(row) {
      this.$router.push({
        path: 'addClassify',
        query: {
          parentId: row.tradeCode
        }
      })
    },
    // 查看下级页面
    showChild(row) {
      this.$router.push({
        name: 'lookClassify',
        query: {
          tradeCode: row.tradeCode
        }
      })
    },
    // 查看本级页面
    showSelf(row) {
      this.$router.push({
        name: 'addClassify',
        query: {
          parentId: row.parentId,
          tradeCode: row.tradeCode
        },
        params: { row }
      })
    },
    // 获取分类用户数
    getUserCount(tradeCode) {
      return getUserCount({ tradeCode }).then(res => {
        return res.data
      })
    },
    // 删除行业
    delIndustry(tradeCode) {
      delIndustry({ tradeCode }).then(res => {
        if (res.code == 200) {
          if (res.data == -1) {
            alert('无法删除')
          } else {
            alert('删除成功')
            window.location.reload();
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.link {
  color: #409eff;
  cursor: pointer;
}
</style>
